import styled, { keyframes } from '@/styled-px2vw'

const upDown = keyframes`
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
`
const Text1 = keyframes`
  0%   {margin-left:0px; margin-top:0px;}
  25%  {margin-left:10px; margin-top:0px;}
  50%  {margin-left:10px; margin-top:10px;}
  75%  {margin-left:0px; margin-top:10px;}
  100% {margin-left:0px; margin-top:0px;}
`
export const Warp = styled.div`
  animation: ${upDown} 1.2s linear infinite;
`
export const Tips = styled.div`
  position:fixed;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,.5);
  top:0;
  left:0;
  z-index:10;
`
export const TipsButton = styled.div`
  width: 189px;
  height: 61px;
  border-radius: 8px;
  border: solid 1px #ffffff;
  margin:0 auto;
  font-size:16px;
  box-shadow:0 0 2px 1px #888;
`
export const TipsButtonText = styled.div`
  height: 45px;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  margin:8px 0;
  margin-left:14px;
`
export const TipsLine = styled.div`
  display: flex;
  flex: 1;
  justify-content: flex-end;
  height: 173px;
  margin-top:20px;
  margin-bottom:7px;
`
export const TipImg = styled.div`
  width: 142px;
  height: 173px;
  background-image:url(${require('../../imgs/tip-line.png')});
  background-repeat: no-repeat;
  background-size: 100%;
  margin-right:30px;
`
export const NoOpen = styled.div`
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  color:#fff;
  height: 100vh;
  font-size:16px;
`